<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="utf-8" />  
    <title>ECharts-基本线性图及其配置要求</title>  
    <!-- ECharts单文件引入 -->
<script src="js/echarts.js"></script> 
</head>  
<body>  
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="box" style="height:400px;width: 800px;padding: 20px"></div>
    </div>  
    <script>
    // 获取到这个DOM节点，然后初始化

    var myChart = echarts.init(document.getElementById("box"));
    var color = [
    [0.083, '#d60e03'],
    [0.167, '#f20e02'],
    [0.25, '#fa2f00'],
    [0.333, '#ec671c'],
    [0.417, '#fa5800'],
    [0.5, '#fa8700'],
    [0.583, '#ffbb00'],
    [0.667, '#fae000'],
    [0.75, '#fbe360'],
    [0.833, '#b4d43e'],
    [0.917, '#69d728'],
    [1, '#4db90d'],
];
option = {
            tooltip : {
              formatter: "{b} : {c}"
            },
            series : [
              {
                type:'gauge',
                min:0,
                max:100,
                splitNumber:11,
                startAngle: 180,
                endAngle: 0,
                center:['70%',"75%"],
                radius : 200,
                splitLine:{
                  show: true,
                  length :20,
                  lineStyle:{
                    color:"#FFF",
                    width:30
                  }
                },
                axisLine: {            // 坐标轴线
                  lineStyle: {       // 属性lineStyle控制线条样式
                    width: 20,
                    color: [
                    [0.50,'#3B8FFE'],
                    [0.55,'#3B8FFE'],
                    [0.60,'#3D93FE'],
                    [0.65,'#4098FE'],
                    [0.70,'#449FFE'],
                    [0.75,'#49AAFE'],
                    [0.80,'#50B6FF'],
                    [0.85,'#56BFFF'],
                    [0.90,'#5AC7FF'],
                    [0.95,'#5CCBFF'],
                    [1,'#5DCDFF']
                    ]
                  }
                },
                axisTick: {   // 坐标轴小标记
                  show: false,
                  splitNumber: 10,   // 每份split细分多少段
                  length :200      // 属性length控制线长
                },
                axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                  formatter: function(v){
                    switch (v+''){
                      case '0': return '0';
                      case '10': return '10';
                      case '20': return '20';
                      case '30': return '30';
                      case '40': return '40';
                      case '50': return '50';
                      case '60': return '60';
                      case '70': return '70';
                      case '80': return '80';
                      case '90': return '90';
                      case '100': return '100';
                      default: return '';
                    }
                  },
                  show: true,
                  textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    color: '#989B9F',
                    fontSize: 14
                  }
                },
                pointer: {
                  width:15,
                  length: '75%',
                  color: '#ABABAB'
                },
                title : {
                  show : true,
                  offsetCenter: [0, '20%'],       // x, y，单位px
                  textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    color: '#999999',
                    display:"none",
                    fontSize: 20
                  }
                },
                detail : {
                  show : true,
                  backgroundColor: '#F00',
                  borderWidth: 0,
                  borderColor: '#ccc',
                  offsetCenter: [70, 40],       // x, y，单位px
                  formatter:'{value}%',
                  textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    fontSize : 14
                  }
                },
                data:[{value: 50, name: '夏普比率'}]
              }
            ]
          };

    myChart.setOption(option);
</script>
</body>  
</html>  